<template>
    <div class="login-box">
        <el-row align="middle" :gutter="30" justify="center">
            <el-col class="logo" :span="6">
                <img src="@/assets/home_logo.webp" alt="" srcset="">
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="logo-icon">
                        <img src="@/assets/logo.png" alt="">
                    </div>
                    <h3 class="title">人人商城</h3>
                    <!-- <el-icon><User /></el-icon> -->
                    <!-- <el-icon><Lock /></el-icon> -->
                    <!-- el-from 组件上 定义 被校验数据对象 model, 和数据校验规则 rules -->
                    <!--
                        ref 定义在标签上 this.$refs 取值为DOM元素
                        ref 定义在组件标签上 this.$refs 取值为组件的实例对象
                     -->
                    <!-- <el-form ref="loginForm" :model="user" :rules="userRules"> -->
                    <el-form ref="loginForm" :model="user" :rules="$userRules">
                        <!-- el-form-item 定义校验信息描述的对应属性名  -->
                        <el-form-item prop="username">
                            <!-- 完成对应数据的操作绑定 -->
                            <el-input v-model="user.username" placeholder="登录用户名" size="large">
                                <template #prefix>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <!-- 如果图标组件为全局注册的组件，属性模式的图标加载因为静态方式 -->
                            <!-- <el-input prefix-icon="Lock"/> -->
                            <!-- 如果图标组件为局部注册，组件使用方式应注册为组件，属性绑定使用方式因注册为仓库变量 ==> 简单规则是使用组合式 -->
                            <el-input type="password" show-password v-model="user.password" :prefix-icon="Lock"  placeholder="登录密码" size="large" />
                        </el-form-item>
                        <!-- 测试 -->
                        <!-- <el-form-item prop="email">
                            <el-input v-model="user.email" :prefix-icon="Lock" />
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" @click="doLogin()" size="large">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { User, Lock } from '@element-plus/icons-vue';
import api from "@/api";
export default {
    components: {
        User
    },
    data() {
        return {
            Lock,
            user: {
                username: "",
                password: "",
                // email:""
            },
            // userRules: {
            //     username: [
            //         { required: true, message: '用户名不能为空', trigger: 'blur' },
            //         { min: 3, message: '用户名长度不能小于3位', trigger: 'blur' },
            //     ],
            //     password: [
            //         { required: true, message: '密码不能为空', trigger: 'blur' },
            //         { min: 3, message: '密码长度不能小于3位', trigger: 'blur' },
            //     ]
            // }
        }
    },
    methods: {
        async doLogin() {
            console.log("登录处理");

            await this.$refs.loginForm.validate();
            // ajax 请求
            let { data,meta } = await api.login(this.user);
            
            if(meta.status<400){
                sessionStorage.setItem("user",JSON.stringify(data));
                sessionStorage.setItem("token",data.token);

                this.$message.success(meta.msg)
                this.$router.push({
                    name: "home"
                })
            }else{
                this.$message.error(meta.msg)
            }

        }
    },
}
</script>
<!-- <script setup>
import { User,Lock } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from "vue-router";
// 路由对象（路由控制对象）
const $router = useRouter();

const user = ref({
    username:"",
    password:""
})
const userRules = {
    username:[
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, message: '用户名长度不能小于3位', trigger: 'blur' },
    ],
    password:[
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 3, message: '密码长度不能小于3位', trigger: 'blur' },
    ]
}

const loginForm = ref();
const doLogin = async function(){
    console.log("登录处理");

    // 登录数据的判断
    // console.log(loginForm);
    // console.log( loginForm.value.validate() )

    await loginForm.value.validate();
    $router.push({
        name:"home"
    })
}

</script> -->

<style lang="scss" scoped>
.login-box {
    height: 100%;
    background-color: $info;

    .el-row {
        height: 100%;
    }

    .logo {
        text-align: right;
        >img{
            width: 100%;
            height: auto;
            border-radius: 16% 4% 16% 4%;
            box-shadow: 0 0 6px lighten($info,5%);
        }
    }

    .el-button {
        width: 100%;
    }
    .el-card{
        overflow: unset;
        position: relative;
        .logo-icon img{
            width: 30%;
            height: auto;
            padding: 2%;
            top: 0%;
            left: 50%;
            transform:translate(-50%,-50%) ;
            border-radius: 50%;
            border: 6px solid $info;
            background-color: white;
            position: absolute;
            object-fit: scale-down;
        }
        .title{
            margin-top: 60px;
            text-align: center;
            letter-spacing: 10px;
        }
        .el-form-item{
            margin-bottom: 26px;
        }
    }
}
</style>